
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <!---引入layui框架的css样式 --->
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 15px">

        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="search1" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="search2" autocomplete="off" class="layui-input">
            </div>
        </div>

        <input id="sear" type="button" value="查询" class="layui-btn layui-btn-primary">
        <input id="add" type="button" value="新增" class="layui-btn">
        <table id="uTable"></table>
    </div>
</form>

<%--    弹出窗口的模板--%>
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id">
                    <input type="text" name="username" id="username" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div id="passwordDIV" class="layui-form-item" style="display: none ">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" value="123456" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input id="save" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>
<%--表格操作模板--%>
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑">
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除">
</script>

<script src="/lib/layui/layui.js"></script>

<script>
    //告诉浏览器加载layui框架中哪些组件
    //加载完小组件 就执行function
    layui.use(['table','layer','form'],function(){
        // console.log("123");
        //第一步：先对加载的组件起名字
        var table=layui.table;
        var layer=layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        //给查询按钮绑定事件
        $("#sear").on("click",function (){
            //用js发起一个请求去要一些数据回来，要到之后把数据插入到table中
            //通过table组件渲染表格
            table.render({
                elem:"#uTable",
                url:"/user?cmd=select",
                cols:[[
                    {title:"ID",field:"id"},
                    {title: "用户名",field:"username"},
                    {title: "密码",field: "password"},
                    {title: "姓名",field: "name"},
                    {title: "电话",field: "tel"},
                    {title: "操作",templet: "#template2"}
                ]],
                where:{username:$("#search1").val(),name:$("#search2").val()},
                page:true,
                limits:[5,10,20],
                limit:5
            });
        }).click();

        //给新增的按钮绑定事件
        $("#add").on("click",function (){
            layer.open({
                title:"新增用户",
                type:1,
                area:['400px','400px'],
                content:$("#template1").html()
            });
            //绑定用户名框的blur事件
            $("#username").on("blur",function (){
                var value = $("#username").val();
                $.get("user?cmd=check&username="+value,function (u){
                    if(u){
                        layer.msg("用户名已重复");
                        $("#username").focus();
                    }
                });
            });

            //给保存的按钮绑定事件
            $("#save").on("click",function (){
                //1.把表单的数据都取出来
                var data = form.val("form1");

                var tel = data.tel;
                var pd = /^1[3456789]\d{9}$/;
                if (!pd.test(tel)){
                    layer.msg("手机号输入错误，请重新输入");
                    return false;
                }
                console.log(data);
                //2.派一个人去发请求,把上边取出来的数据带过去(Ajax)
                //第一个参数：请求地址
                //第二个参数：请求时传的数据
                //第三个参数：请求成功后做什么：这个function只有200成功时才执行
                data.cmd = "save";
                $.post("/user",data,function (){
                    //关窗口
                    layer.closeAll();
                    //给成功提示
                    layer.msg("保存成功");

                    //再查一遍表格的数据(点一下查询按钮)
                    $("#sear").click();
                });
            })
        });
        //给表格操作绑事件
        table.on("tool",function (obj){
            var event = obj.event;
            var data = obj.data;//当前这一行的数据
            if (event==="edit"){//说明点了编辑
                //去后台获取这个商品的所有的数据,取成功了再弹出
                $.get("/user?cmd=info&id="+data.id,function (user){
                    layer.open({
                        title:"编辑商品",
                        type:1,
                        area:['400px','400px'],
                        content:$("#template1").html()
                    });
                    // $("#passwordDIV").remove();
                    $("#username").attr("readonly",true);
                    form.val("form1",user);

                    //给保存的按钮绑定事件
                    $("#save").on("click",function (){
                        //1.把表单的数据都取出来
                        var data = form.val("form1");
                        var tel = data.tel;
                        var pd = /^1[3456789]\d{9}$/;
                        if (!pd.test(tel)){
                            layer.msg("手机号输入错误，请重新输入");
                            return false;
                        }

                        //2.派一个人去发请求,把上边取出来的数据带过去(Ajax)
                        //第一个参数：请求地址
                        //第二个参数：请求时传的数据
                        //第三个参数：请求成功后做什么：这个function只有200成功时才执行
                        data.cmd = "save";
                        $.post("/user",data,function (){
                            //关窗口
                            layer.closeAll();
                            //给成功提示

                            layer.msg("保存成功");
                            //再查一遍表格的数据(点一下查询按钮)
                            $("#sear").click();
                        });
                    });
                });
            }
            if (event==="delete"){//说明点了删除
                layer.confirm("您确定要删除这个商品吗？",function (){
                    $.post("/user",{cmd:"delete",id:data.id},function (result){
                        if (result.code===0){
                            layer.closeAll();
                            layer.msg("删除成功");
                            $("#sear").click();
                        }else {
                            layer.closeAll();
                            layer.msg(result.msg);
                        }

                    });
                },function (){});
            }
        })
    })
</script>
</body>
</html>

